<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{{url_for('static', filename='js/jquery.3.6.min.js')}}">
    </script>
    <script src="{{url_for('static', filename='js/echarts.min.js')}}">
    </script>
    <script>
                                $(function () {
                                    //var int = setInterval(function () {  //设置定时器
                                       $.ajax(
                                           {
                                               url:"/corrosion/multiplicityshowdata", //从setData函数中获取数据
                                               type:"GET",
                                               dateType:'json',
                                                success:function(ret){

                                                    var newData = JSON.stringify(ret);
                                                    newData = eval("("+newData+")");
                                                    //已经完成从data页面获取了数据，之后要拆解数据然后绘制折线图
                                                    //console.log(typeof newData)
                                                    //console.log(newData)
                                                    //window.alter(ret)
                                                    var time = [],
                                                    cr_max = [],
                                                    cr_avg = [];
                                                    var a,key,max=0;
                                                    var data={};
                                                    var start=0;
                                                    var myEcharts=echarts.init(document.getElementById('main'))
                                                    var option={
                                                        toolbox: { feature: { saveAsImage: {} } },
                                                        dataZoom: [
                                                            { type: 'slider', xAxisIndex: 0, right: '20%', left: '20%' },
                                                            { type: 'slider', yAxisIndex: 0, left: '92%', right: '5%' },
                                                        ],
                                                        //图例
                                                        title:{text:''},
                                                        //图例组件
                                                        //legend:{data:['最大腐蚀速率','均匀腐蚀速率','腐蚀因子'],textStyle:{color:'blue'}},
                                                        tooltip: { show: true },

                                                    };
                                                    //设置配置

                                                    for (a in newData["data"]){
                                                        //console.log(a)
                                                        console.log(newData["data"][a]);
                                                            for (var b in newData["data"][a]){
                                                                //console.log(b)
                                                                console.log(newData["data"][a][b]);
                                                                if(b=="name") {
                                                                    name=newData["data"][a][b];
                                                                    if(start==0){
                                                                        c={
                                                                            legend:{data:[name+'腐蚀速率',name+'均匀腐蚀速率'],textStyle:{color:'blue'}},
                                                                            xAxis:{data:time},
                                                                            yAxis: {max:max*1.2},
                                                                            series: [
                                                                            {
                                                                                name: name+'腐蚀速率',
                                                                                type: 'line',
                                                                                itemStyle: {normal: {lineStyle: {width:0.5}}},
                                                                                data: cr_max},
                                                                            {
                                                                                name: name+'均匀腐蚀速率',
                                                                                type: 'line',
                                                                                itemStyle: {normal: {lineStyle: {width:0.5}}},
                                                                                data: cr_avg}
                                                                            ]
                                                                        };
                                                                        option = Object.assign({}, option, c);
                                                                        start++;
                                                                    }
                                                                        else {
                                                                            option["legend"]["data"].push(name+'腐蚀速率',name+'均匀腐蚀速率');
                                                                            option["yAxis"]["max"]=max*1.2;
                                                                            option["series"].push({
                                                                                name: name+'腐蚀速率',
                                                                                type: 'line',
                                                                                itemStyle: {normal: {lineStyle: {width:0.5}}},
                                                                                data: cr_max},
                                                                            {
                                                                                name: name+'均匀腐蚀速率',
                                                                                type: 'line',
                                                                                itemStyle: {normal: {lineStyle: {width:0.5}}},
                                                                                data: cr_avg})
                                                                        }
                                                                        time=[];cr_max=[];cr_avg=[];
                                                                }
                                                                //console.log(name);
                                                                if(b=="data"){
                                                                    for(var c in newData["data"][a][b]){
                                                                        //console.log(c)
                                                                        //console.log(newData["data"][a][b][c]);
                                                                        for (key in newData["data"][a][b][c]){
                                                                        //console.log(key)
                                                                        //console.log(newData["data"][a][b][key]);
                                                                        if (key == "Time")
                                                                            time.push(newData["data"][a][b][c][key]);
                                                                        if (key == "CR_max"){
                                                                            cr_max.push(newData["data"][a][b][c][key]);
                                                                            if (max<newData["data"][a][b][c][key])max=newData["data"][a][b][c][key];

                                                                            }
                                                                        if (key == "CR_avg"){
                                                                            cr_avg.push(newData["data"][a][b][c][key]);
                                                                            if (max<newData["data"][a][b][c][key])max=newData["data"][a][b][c][key];
                                                                            //console.log(newData["data"][a][b][c][key])
                                                                            }
                                                                        }
                                                                    }
                                                                    //console.log(time)

                                                                }

                                                                        //console.log(time)


                                                            }


                                                    }
                                                    myEcharts.setOption(option);




                                                    setInterval(function () {
                                                        //myEcharts.clear();

                                                        myEcharts.setOption({
                                                            series: [{
                                                                type:'line',
                                                                markLine: {
                                                                // silent: true,
                                                                lineStyle: {
                                                                  normal: {
                                                                    color: 'red'
                                                                  }
                                                                },
                                                                data: [{
                                                                    yAxis: document.getElementById('addname').value
                                                                }],
                                                                label: {
                                                                  normal: {
                                                                    formatter: '警戒线'
                                                                  }
                                                                },
                                                            },
                                                            }]
                                                        });
                                                    }, 500);

                                                }

                                           }
                                       )
                                    //},1000)
                                })
    </script>
</head>
<body>
<div class="three">
<div class="echart0">
    <center><div id="main" style="width: 1000px;height: 600px;border: aqua 3px solid;float:left;"></div></center>
<!--    <button id="export">export png</button>-->
    <p>均匀腐蚀速率警戒线设置：<input type="text" id="addname" style="width: 60px;"/>um/a</p>
</div>
</div>
<div>
    <center>
<!--        <button>开始时间选取</button>-->
<!--        <button>结束时间选取</button>-->
<!--        <button onclick="window.location.href='{{url_for('speed')}}'">返回最大腐蚀速率因子界面</button>-->
        <input type="button" value="开始时间选取" class="btn2" onclick="window.location.href='{{url_for('speed')}}'">
        <input type="button" value="结束时间选取" class="btn2" onclick="window.location.href='{{url_for('speed')}}'">
        <input type="button" value="返回最大腐蚀速率因子界面" class="btn2" onclick="window.location.href='{{url_for('speed')}}'">
    </center>
</div>
</body>
<style>
    .btn2 {
        height: 40px;
        width: 300px;
        //border-radius: 50%;
        font-size: 15px;
        margin-left: 30px;
        border-width: 1px
    }
    .echart0 {
        width: 1000px;
        height: 650px;
        border: solid 1px;
        //justify-content: center;
    }
    .three {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
</style>
</html>